<template>
  <div class="password-retrieval">
    <div class="resetting-pwd_title">
      <span class="circle"></span>
      <span>找回密码</span>
    </div>
    <div class="resetting-pwd_tip">请输入您的账户号、手机号码</div>
    <a-form
      ref="formRef"
      :label-col-style="{ display: 'none' }"
      :wrapper-col-style="{ flex: 1 }"
      :model="form"
      :rules="rules"
      @submit="handelGetCode"
    >
      <a-form-item field="mobile" style="margin-bottom: 0">
        <a-input placeholder="用户账号/手机号码" v-model.trim="form.mobile" :max-length="11" />
      </a-form-item>
      <a-button class="login-btn" html-type="submit">下一步</a-button>
    </a-form>
  </div>
</template>

<script setup lang="ts">
import * as Regexp from "@/utils/regexp";
import { getVerifyCode } from "@/apis";
import { type FormInstance, Message } from "@arco-design/web-vue";
import _ from "lodash"

const emit = defineEmits(["nextSept"]);

const form = ref({
  mobile: ""
});
const rules = {
  mobile: [
    { required: true, message: "请输入手机号" },
    { match: Regexp.Phone, message: "*号码不存或错误在请重新输入" }
  ]
};

/**
 * 获取验证码
 */
const formRef = ref<FormInstance>();
const getCode = async () => {
  const valid = await formRef.value?.validate();
  if (valid) return;
  await getVerifyCode({ mobile:form.value?.mobile });
  emit("nextSept", form.value.mobile);
};
const handelGetCode = _.debounce(getCode, 500)
</script>

<style scoped lang="scss">
@import "index";
</style>
